<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>智能报修系统——运维人员业绩</title>
    <link rel="stylesheet" type="text/css" href="../../resources/mobileOperator/css/operator_common.css"/>
    <script src="../../resources/mobileOperator/js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../../resources/mobileOperator/js/jquery-3.1.1.min.js"></script>
</head>
<body style="width: 100%;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:100%;height:300px;margin-top: 2rem;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    var main = document.getElementById("main");

    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var resizeWorldMapContainer = function () {
        main.style.width = window.innerWidth + 'px';
    };
    //设置容器宽高
    resizeWorldMapContainer();


//    设置时间
    var currentdate = new Date();
    var currentyear = currentdate.getFullYear();

    var currentmonth = currentdate.getMonth()+1;

    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        legend: {
            data: [""+currentyear+"/"+currentmonth],
            textStyle: {fontWeight: 'bold', fontSize: 16},
            width: main.style.width
        },
        xAxis: {
            data: [ "完成工单","总单数",  "未完成单","本月单", "甩单数"],
            axisLabel: {
                interval: 0//横轴信息全部显示
            },
            axisLine: {
                lineStyle: {
                    color: '#295436'
                }
            }
        },
        yAxis: {
            axisLine: {
                lineStyle: {
                    color: '#295436'
                }
            }
        },
        series: [{
            name: ""+currentyear+"/"+currentmonth,
            type: 'bar',
            data: [],
            barWidth: 40,
            itemStyle: {
                normal: {
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params) {
                        var colorList = ['#FF713C', '#F2FF3C', '#BCFF3A', '#3CFFC4', '#00DB66'];
                        return colorList[params.dataIndex];
                    },
                    label: {//给柱状图上添加数据
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#615a5a'
                        },
                        formatter:function(params){
                            if(params.value==0){
                                return '';
                            }else
                            {
                                return params.value;
                            }
                        }
                    }
                }
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //用于使chart自适应高度和宽度
    window.onresize = function () {
        //重置容器高宽
        resizeWorldMapContainer();
        myChart.resize();
    };




    //定义一个数组来放坐标值
    var xdatas = [];

    var one={'receiveOne':1506101035};
        $.ajax({
                    type: "POST",//请求方式
                    url: "http://localhost:8080/countWorkOrder",//地址，就是json文件的请求路径
                    async: true,
                    data: JSON.stringify(one),//解决400错误
                    dataType: "json",//数据类型可以为 text xml json  script  jsonp
                    contentType: 'application/json;charset=UTF-8',//解决415错误
                    success: function (result) {//返回的参数就是 action里面所有的有get和set方法的参数
                        console.log(result.data);
                        if (result) {

                            //分别取出这几个值
                            var key1 = "未完成";
                            var value1 = result.data[key1];

                            var key2= "总单数";
                            var value2 = result.data[key2];

                            var key3= "甩单数";
                            var value3 = result.data[key3];

                            var key4= "本月单";
                            var value4 = result.data[key4];

                            var key5= "已完成";
                            var value5 = result.data[key5];

//                            将取出的值的value组成新的数组
                            var values =  [value1,value2,value3,value4,value5];
//                            console.log(values);

                            for (var i = 0; i < 5; i++) {
                                xdatas.push(values[i]);    //挨个取出类别并填入类别数组
                            }
                            myChart.setOption({
                                yAxis:{},
                                series:{
                                    data:xdatas
                                }
                            });

                        }
                    }, error: function () {
                alert("获取运维业绩失败，请重试！");
                    }
                });


</script>
</body>
</html>
